<template>
    <div class="article-list">
        <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh"  :success-text="state.refreshSucessText"
        success-duration="1500"
        >
            <van-list v-model:loading="state.loading" :finished="state.finished" v-model:error="state.loaderror"
                error-text="请求失败,点击重新加载" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in state.newslist" :key="item.id" :title="item.title" /> -->

                <article-item v-for="article in state.newslist" :key="article.id"  :article="article" class="cell-list"></article-item>

            </van-list>
        </van-pull-refresh>

    </div>
</template>  
    
<script>
import { ref, reactive, onMounted } from 'vue';
import { getArticles } from "../../../api/article"
import ArticleItem from "../../../components/article-item/index.vue"



function  useLoad( id){

    const state = reactive({
            newslist: [],
            loading: false,
            finished: false,
            pageNumber: 1,
            loaderror: false,
            refreshing: false,
            refreshSucessText:"刷新成功!"
        });


        const onLoad = async () => {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求

            try {
                const params = {
                    channel_id: id,
                    pageNumber: state.pageNumber || 1,

                };

                state.loading = true
                const { data } = await getArticles(params);
                var results = data.data;
                //console.log("getarticles result=", results);
                let alist = results.list;
                //3本次数据加载完成后,要把加载状态设置为结束,loading设置为false以后,才能够触发下一次的加载更多的操作
                state.loading = false;
                //4 数据全部加载完成后,发finished为设置为true
                if (results.list.length > 0) {
                    // 将服务端返回的数据填充到list数组
                    state.newslist.push(...alist);
                    //newslist.value=alist;
                    //console.log("newlist", state.newslist);
                    console.log("state newslist length", state.newslist.length, "backlist length", alist.length);
                    state.pageNumber = results.p_num;
                    console.log("state pagenuber", state.pageNumber);
                } else {
                    console.log("state finished is true");
                    state.finished = true;
                }

            } catch (error) {
                state.loaderror = true;
                state.loading = false;
            }


        };
      const onRefresh= async ( )=>{
        try {
            console.log(state);
            const params={
                channel_id:  id,
                pageNumber: state.pageNumber || 1,
                referer:"load"
            };
            const {data}=await getArticles(params);
            const results=data.data.list;
            //追加到底部
            state.newslist.unshift(...results);
            //关闭下拉刷新的loading状态,第36课下拉刷新效果
            state.refreshing=false;
            state.refreshSucessText=`刷新成功,更新了${results.length}条数据`;

        } catch (error) {
           // console.log("请求失败"+error);
           state.refresh=false;
           state.refreshSucessText="刷新失败";
           
            
        }

      } 
      return {state,onLoad, onRefresh} 

    }
export default {
    components:{
        ArticleItem
    },

    props: {
        channel: {
            type: Object,
            requrired: true
        }
    },


    setup(props) {
      return  {...useLoad(props.channel.id) };//注意此处的写法
    },

};
</script>  
    
<style>
.container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
  }

  h1 {
      color: #333;
  }

  button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
  }

  .cell-list {
      min-height: 100px;

  }
  .article-list{
    margin-top: 60px;
    height: 85vh;
    overflow-y: auto;
  }
</style>